<template>
  <div class="employee-container">

    <div class="tableBar" style="margin: 10px 55px ">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="器械编号" style="margin: 0 10px">
          <el-input
            v-model="searchObj.id"
            style="width: 120px"
            placeholder="器械编号"
            clearable
            @clear="getEquipList"
            @keyup.enter.native="getEquipList"
          ></el-input>
        </el-form-item>
        <el-form-item label="器械名字" style="margin: 0 10px">
          <el-input
            v-model="searchObj.equipName"
            style="width: 120px"
            placeholder="器械名字"
            clearable
            @clear="getEquipList"
            @keyup.enter.native="getEquipList"
          ></el-input>
        </el-form-item>
        <el-form-item prop="date2" label="购入时间" style="margin: 0 10px">
          <el-date-picker
            v-model="searchObj.beginTime"
            style="width: 190px"
            type="date"
            placeholder="选择购入时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeBeginDate">
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            v-model="searchObj.endTime"
            style="width: 190px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeEndDate">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="searchObj">
        <el-form-item label="状态" style="margin: 0 10px">
          <el-select
            v-model="searchObj.status"
            style="width: 155px"
            placeholder="请选择认证状态"
            clearable
            @clear="getEquipList"
            @keyup.enter.native="getEquipList">
            <el-option label="可用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在区域" style="margin: 0 10px">
          <el-select v-model="searchObj.regionId" clearable placeholder="请选择" @clear="handleClear">
            <el-option
              v-for="item in regionList"
              :key="item.id"
              :label="item.regionName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="擅长方向">
          <el-cascader
            clearable
            @clear="getEquipList"
            v-model="cascaderList"
            :options="categoryList"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item style="margin: 0 10px">
          <el-button type="primary" @click="getEquipList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 95%;margin:0 auto"
        @selection-change="handleSelectionChange"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="55"
          align="center">
        </el-table-column>
        <el-table-column
          label="器械编号"
          width="200"
          align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          label="器械展示图"
          width="100"
          align="center">
          <template slot-scope="scope">
            <img :src="scope.row.picture" min-width="70" height="70"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="equipName"
          label="器械名称"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="regionName"
          label="所在区域"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="intro"
          label="简介"
          align="center">
        </el-table-column>
        <el-table-column
          prop="partList"
          label="锻炼部位"
          width="130"
          align="center">
          <template slot-scope="scope">
            {{ getPartName(scope.row.partList) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="停用/可用"
          width="137"
          align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="可用"
              inactive-text="停用"
              active-color="#67C23A"
              inactive-color="#E6A23C"
              @change="switchStatus($event,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="purchaseTime"
          label="购入时间"
          width="110"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.purchaseTime === null ? '-' : scope.row.purchaseTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="140">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-info"
              circle
              style="margin: 1px 0 1px 10px "
              size="mini"
              type="info"
              @click="handlePreview(scope.$index, scope.row)"
            >
            </el-button>
            <router-link :to="'/equip/edit/'+scope.row.id">
              <el-button
                icon="el-icon-edit"
                circle
                style="margin:  1px 0 0  10px "
                size="mini"
                type="primary">
              </el-button>
            </router-link>
            <el-button
              icon="el-icon-delete"
              circle
              style="margin: 1px 0 1px 10px "
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="paginationBar">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.current"
          :page-sizes="[4, 8, 12,16]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="width: 30% ;margin: 5px auto">
        </el-pagination>
      </div>

      <el-dialog
        title="教练信息"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-descriptions
          v-loading="loading"
          :column="2"
          border>
          <el-descriptions-item label="器械名称">{{ this.equip.equipName }}</el-descriptions-item>
          <el-descriptions-item label="展示图"><img :src="this.equip.picture" width="100px"></el-descriptions-item>
          <el-descriptions-item label="器械编号">{{ this.equip.id }}</el-descriptions-item>
          <el-descriptions-item label="购入日期">{{
              this.equip.purchaseTime === null ? '-' : this.equip.purchaseTime
            }}
          </el-descriptions-item>
          <el-descriptions-item label="所在区域">{{ this.equip.regionName }}</el-descriptions-item>
          <el-descriptions-item label="使用状态状态">
            <el-tag
              :type="equip.status === 0 ? 'warning' : 'success'"
              disable-transitions>
              {{ equip.status === 0 ? '停用' : '可用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="擅长方向" :span="2">{{ getPartName(this.equip.partList) }}</el-descriptions-item>
          <el-descriptions-item label="简介">{{ this.equip.intro }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>


  </div>
</template>

<script>
import equipAPI from '@/api/equip'
import categoryAPI from "@/api/category";
import regionAPI from "@/api/region";

export default {
  data() {
    return {
      equipStatus: '',
      dialogVisible: false,
      value: true,
      loading: true,
      regionList: [],
      dialogFormVisible: false,
      tableData: [],
      multipleSelection: [],
      deleteBatchIds: [],
      total: 0,
      current: 1,
      pageSize: 4,
      searchObj: {},
      categoryList: [],
      equip: {},
      cascaderList: []
    }
  },
  created() {
    this.init()
  },

  methods: {
    switchStatus(val, id) {
      console.log(val);
      equipAPI.modifyStatus(id, val).then(res => {
        if (res.data === true) {
          let msg = val === 1 ? '可用' : '停用'
          this.$message.success(id.toString() + '号器械状态已修改为：' + msg)
        }
      })
    },
    handleClear() {
      this.getEquipList()
    },
    handlePreview(index, row) {
      this.dialogVisible = true
      equipAPI.getById(row.id).then(res => {
        this.loading = false
        console.log(res);
        this.equip = res.data
      })
    },
    getPartName(parts) {
      let partName = []
      if (Array.isArray(parts)) {
        parts.forEach(part => {
          partName.push(part.categoryName)
        })
        if (partName.length > 2) {
          return partName.slice(0, 3).toString() + '等'
        }
        return partName.toString()
      }
      return
    },
    changeBeginDate(val) {
      this.searchObj.beginTime = val
      this.getEquipList()
    },
    changeEndDate(val) {
      this.searchObj.endTime = val
      this.getEquipList()
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该条信息', '删除', {
        distinguishCancelAndClose: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定删除'
      })
        .then(() => {
          equipAPI.deleteEquip(row.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
          this.searchObj.current = 1
          this.getEquipList()
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    handleBatchDelete(index, row) {
      if (this.deleteBatchIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '未选择删除对象'
        })
        return
      } else {
        this.$confirm('是否要删除该条信息', '删除', {
          distinguishCancelAndClose: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定删除'
        })
          .then(() => {
            equipAPI.deleteBatchEquip(this.deleteBatchIds).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.current = 1
              this.getEquipList()
            })
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      }
    },
    init() {
      this.getEquipList()
      categoryAPI.getCategoryCascader().then(res => {
        this.categoryList = res.data
      })
      regionAPI.getAllRegion().then(res => {
        this.regionList = res.data
      })
    },
    handleCurrentChange(val) {
      this.current = val
      this.getEquipList()
    },
    handleSizeChange(val) {
      console.log(val)
      this.pageSize = val
      this.getEquipList()
    },
    getEquipList() {
      this.searchObj.pageSize = this.pageSize
      this.searchObj.current = this.current
      equipAPI.getEquipPage(this.searchObj).then(res => {
        // console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.log(err, 'err')
        this.$message.error('请求出错了：' + err.message)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.deleteBatchIds = []
      this.multipleSelection.forEach(row => {
        this.deleteBatchIds.push(row.id)
      })
      console.log(this.deleteBatchIds)
    },
    handleChange(val) {
      console.log(val);
      if (val.length === 0) {
        this.getEquipList()
      }
      // 使用数组pop特性，将最后id弹出，保证无论多深，弹出的一定是最底层的分类id
      this.searchObj.part = val.slice(-1).toString()
      // this.cascaderList.push(this.searchObj.expertise)
      // console.log(this.cascaderList)
      // console.log(this.searchObj.expertise)
    }
  }
}
</script>

